<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>温湿度监测</title>
        <meta name="description" content="温湿度检测">
        <meta name="keywords" content="温湿度监测">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../css/style.css">
        <script src="../plugins/echarts/echarts.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

        <script>
            function getUrlParam(paraName) {
                var url = document.location.toString();
                //alert(url);
                var arrObj = url.split("?");
                if (arrObj.length > 1) {
                    var arrPara = arrObj[1].split("&");
                    var arr;
                    for (var i = 0; i < arrPara.length; i++) {
                        arr = arrPara[i].split("=");
                        if (arr != null && arr[0] == paraName) {
                            return arr[1];
                        }
                    }
                    return "";
                }
                else {
                    return "";
                }
            }

            var id = getUrlParam("id");
        </script>

        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>环境监测<small>温湿度监测</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>环境监测</el-breadcrumb-item>
                    <el-breadcrumb-item>温湿度监测</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box" style="height: 200px">
                        <div class="excelTitle" >
                            大棚详细数据
                        </div>
                    <div class="showTime" style="margin-left: 900px"></div>
                    <script>
                        var t = null;
                        t = setTimeout(time, 1000); //開始运行
                        function time() {
                            clearTimeout(t); //清除定时器
                            dt = new Date();
                            var y = dt.getFullYear();
                            var mt = dt.getMonth() + 1;
                            var day = dt.getDate();
                            var h = dt.getHours(); //获取时
                            var m = dt.getMinutes(); //获取分
                            var s = dt.getSeconds(); //获取秒
                            document.querySelector(".showTime").innerHTML =
                                "当前时间：" +
                                y +
                                "年" +
                                mt +
                                "月" +
                                day +
                                "-" +
                                h +
                                "时" +
                                m +
                                "分" +
                                s +
                                "秒";
                            t = setTimeout(time, 1000); //设定定时器，循环运行
                        }
                    </script>

                        <table class="exceTable" cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="4" class="headBody">{{reportData.name}}号大棚</td>
                            </tr>
                            <tr>
                                <td width='20%' class="tabletrBg">传感器数量</td>
                                <td width='30%'>{{reportData.devicenum}}</td>
                                <td width='20%' class="tabletrBg">负责人</td>
                                <td width='30%'>{{reportData.undertaker}}</td>
                            </tr>
                            <tr>
                                <td class="tabletrBg">大棚CO2</td>
                                <td>{{reportData.co}}</td>
                                <td class="tabletrBg">大棚温度</td>
                                <td>{{reportData.wendu}}</td>

                            </tr>
                        </table>
                    <script>
                        var vue = new Vue({
                            el: '#app',
                            data:{
                                reportData:{
                                }
                            },
                            created() {
                                axios.get("/greenhouse/getReportData.do?id="+id).then((res)=>{
                                    if(res.data.flag){
                                        this.reportData = res.data.data;
                                    }else {
                                        this.$message.error(res.data.message);
                                    }

                                });
                            }
                        })
                    </script>
                        <br>
                        <br>
                        <br>
                </div>
            </div>
        </div>
<div class="box">
    <div id="main" style="width: 1000px;height:500px;  margin-left: 150px;margin-top: 50px"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '传感器数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['温度C°', '湿度%','二氧化碳浓度%', '光照强度klx', 'PH^-1']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['0', '2', '4', '6', '8', '10', '12','14','16','18','20','22','24']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '温度C°',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [10, 23, 40, 24, 30, 25, 26,10, 23, 40, 24, 30, 25, 26]
                },
                {
                    name: '湿度%',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [30, 50, 70, 40, 45, 55, 60,30, 50, 70, 40, 45, 55, 60]
                },
                {
                    name: '二氧化碳浓度%',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [0.03, 0.05, 0.07, 0.1, 0.04, 0.03, 0.01,0.03, 0.05, 0.07, 0.1, 0.04, 0.03, 0.01]
                },
                {
                    name: '光照强度klx',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [100, 110, 120, 105, 101, 105, 111,100, 110, 120, 105, 101, 105, 111]
                },
                {
                    name: 'PH^-1',
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [6, 7, 7, 8, 7, 6, 6,6, 7, 7, 8, 7, 6, 6]
                }
            ]
        };

        option && myChart.setOption(option);</script>

</div>
</div>
    </body>

</html>
